<script setup lang="ts">
import { ref, defineEmits, computed, watch, onMounted, nextTick } from 'vue';
import { useBooleanStore } from '@/store';
import { Notification } from '@arco-design/web-vue';
import {
  searchMaterial,
  searchByBack,
  workbinOutStoreroom,
} from '@/api/material-receipt';

const emit = defineEmits(['updateArray']);
const booleanStore = useBooleanStore();
const hStyle = ref({
  'background-color': booleanStore.color,
  'border-radius': booleanStore.borderRadius,
});
const scanInput = ref<any>('');
// 表单查询数据

const aoNo = ref<string>('');
const barcode = ref<string>('');
const itemCode = ref<string>('');
const qualityCode = ref<string>('');

const pageSize = ref<number>(5);
const pageNumber = ref<number>(1);
const current = ref<number>(1);
const description = ref<string>('待完成');
const description2 = ref<string>('待完成');
const scanCode = ref<string>('');

// 操作码俩次确认
const isConfirm = ref<boolean>(false);
const disabled = ref<boolean>(false);
// 存储移交成功的数据
const scanDataList = ref<any[]>([]);
// 发送搜索数据
const flowQueryData = ref({
  searchParams: computed(() => ({
    aoNo: aoNo.value,
    barcode: barcode.value,
    itemCode: itemCode.value,
    qualityCode: qualityCode.value,
  })),
  pageParameter: computed(() => ({
    rows: pageSize.value,
    page: pageNumber.value,
  })),
});
// 表格数据
async function handleSearch() {
  const newData = await searchMaterial(flowQueryData.value);
  emit('updateArray', newData);
}

function resetCode() {
  scanDataList.value = [];
  scanCode.value = '';
}
// 重置
function reset() {
  aoNo.value = '';
  barcode.value = '';
  itemCode.value = '';
  handleSearch();
}

// 退库扫码移交
async function topToLastScan() {
  const scanBarcode = ref('');
  disabled.value = true;
  // 85的零件不是纯数字 GW-222222
  scanBarcode.value = scanCode.value;
  const info = ref({
    barCode: computed(() => scanCode.value),
    pageParameter: computed(() => ({
      rows: 500,
      page: 1,
    })),
  });
  try {
    const data: any = await searchByBack(info.value);
    if (data.retCode === '200') {
      for (let i = 0; i < data.responseBody.length; i += 1) {
        scanDataList.value.push(data.responseBody[i]);
      }
      Notification.success({
        title: '成功',
        content: '接收成功',
        closable: true,
      });
      disabled.value = false;
      scanCode.value = '';
      nextTick(() => {
        scanInput.value.focus();
      });
    } else {
      Notification.error({
        title: '失败',
        content: '接收失败',
        closable: true,
      });
      disabled.value = false;
      scanCode.value = '';
      nextTick(() => {
        scanInput.value.focus();
      });
    }
  } catch (error) {
    disabled.value = false;
    Notification.error({
      title: '失败',
      content: '接收失败,连接超时',
      closable: true,
    });
    console.log(error);
  }
}

// 扫码移交加输入框回车
async function scanSubmit() {
  if (scanCode.value === '9005' || scanCode.value === '90059005') {
    if (scanDataList.value.length > 0) {
      if (isConfirm.value) {
        disabled.value = true;
        const info: any = ref({
          data: booleanStore.listTwo,
          itemCode: booleanStore.listTwo[0].itemCode,
          returnQty: booleanStore.listTwo[0].returnQty,
          status: booleanStore.listTwo[0].status,
          wmsDeliveryPlanId: booleanStore.listTwo[0].wmsDeliveryPlanId,
          barcode: booleanStore.listTwo[0].barcode,
        });
        booleanStore.toggleBool(0);
        try {
          const data: any = await workbinOutStoreroom(info.value);
          if (data.retCode === '200') {
            booleanStore.toggleBool(0);
            Notification.success({
              title: '成功',
              content: data.message,
              closable: true,
            });
            scanDataList.value = [];
            handleSearch();
          } else {
            booleanStore.toggleBool(0);
            Notification.error({
              title: '失败',
              content: data.message,
              closable: true,
            });
            scanDataList.value = [];
            handleSearch();
          }
        } catch (error) {
          Notification.error({
            title: '失败',
            content: '系统异常，调用接口错误超时',
            closable: true,
          });
          booleanStore.toggleBool(0);
          console.log(error);
        }
        disabled.value = false;
        scanCode.value = '';
        nextTick(() => {
          scanInput.value.focus();
        });
        isConfirm.value = false;
      } else {
        // scanCode.value = '';
        nextTick(() => {
          scanInput.value.focus();
        });
        isConfirm.value = true;
      }
    } else {
      Notification.warning({
        title: '提示',
        content: '请先扫物料编码',
        closable: true,
      });
    }
  } else {
    for (let i = 0; i < scanDataList.value.length; i += 1) {
      if (scanDataList.value[i].barcode === scanCode.value) {
        Notification.warning({
          title: '提示',
          content: '请误重复扫码',
          closable: true,
        });
        return;
      }
    }
    await topToLastScan();
  }
}

onMounted(() => {
  nextTick(() => {
    scanInput.value.focus();
  });
  handleSearch();
});
// 监听分页
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 60) {
    pageNumber.value = booleanStore.pageNum;
    pageSize.value = booleanStore.pageSize;
    handleSearch();
  }
});

watch(
  scanDataList,
  () => {
    if (scanDataList.value.length !== 0) {
      current.value = 2;
    } else {
      current.value = 1;
    }
    booleanStore.setList(scanDataList.value, 60);
  },
  { deep: true }
);
</script>

<template>
  <!-- <a-card :header-style="hStyle">
    <template #title>
      <div class="font">流程进度</div>
    </template>
    <a-steps type="arrow" small changeable :current="current">
      <a-step :description="description">扫码移交</a-step>
      <a-step :description="description2">零件接收</a-step>
    </a-steps>
  </a-card> -->
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">扫码操作</div>
    </template>
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input
            ref="scanInput"
            v-model="scanCode"
            placeholder="请输入缓存箱/托盘码/条码"
            size="large"
            :disabled="disabled"
            @keyup.enter="scanSubmit"
          />
        </div>
      </a-col>
      <a-col :span="6">
        <a-button type="primary" size="large" @click="scanSubmit"
          >退库接收</a-button
        >
        <a-button class="btn-reset" size="large" @click="resetCode"
          >重置</a-button
        >
      </a-col>
    </a-row>
  </a-card>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">已移交零件列表</div>
    </template>
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input v-model="aoNo" placeholder="AO" size="large" />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input v-model="barcode" placeholder="条码" size="large" />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input v-model="itemCode" placeholder="图号" size="large" />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input v-model="qualityCode" placeholder="质编" size="large" />
        </div>
      </a-col>
    </a-row>
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset"
          >重置搜索框</a-button
        >
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
.margin-top {
  margin-top: 10px;
}
.btn-group {
  float: right;
  margin-top: 15px;
}

.btn-reset {
  margin-left: 10px;
}
.font {
  font-size: 20px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.div-tips {
  align-items: center;
  text-align: center;
  color: #999;
}
</style>
